"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/15
 */
import * as React from 'react'
import {incomeData} from "../../assets/data";
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";
import MyText from "../../component/MyText";
import Line from "../../component/Line";
import NavBackButton from "../../component/BackButton";
const NavigationBar = require('react-native-navbar').default;
import Colors from "../../assets/styles/Colors";
import {SCREEN_WIDTH} from "../../constant";
import WithdrawPage from "./Withdraw";
import IncomeListItem from "../../component/IncomeItem";

const {View, TouchableOpacity, FlatList} = require('react-native');
const {connect} = require('react-redux');

class IncomePage extends React.Component<BalanceComponent, any> {

    constructor(props: any, context: any,) {
        super(props, context);
        this.state = {
            currentTab: 0
        }
    }


    componentWillMount(): void {
        this.props.dispatch({
            type:'balance/fetchInclomeList',
        });

        this.props.dispatch({
            type:'balance/fetchWithDrawList',
        })
    }


    onRefresh = ()=>{
      this.props.dispatch({
          type:'balance/fetchInclomeList'
      })
    };
    onChangeTab = (currentTab) => {
        this.setState({currentTab})
    };

    renderTabBar = () => {
        return (
            <View style={[commonStyles.flexRow, commonStyles.relative, {
                height: autoSize(40),
                backgroundColor: Colors.White,
                alignItems: 'center'
            }]}>
                <TouchableOpacity style={[commonStyles.flex1]} onPress={this.onChangeTab.bind(this, 0)}>
                    <View style={[commonStyles.flex1, commonStyles.centerVH]}>
                        <MyText color={this.state.currentTab === 0 ? Colors.Primary : Colors.SubTitle}>收入</MyText>
                    </View>
                </TouchableOpacity>
                <Line width={1} height={autoSize(20)}/>
                <TouchableOpacity style={[commonStyles.flex1]} onPress={this.onChangeTab.bind(this, 1)}>
                    <View style={[commonStyles.flex1, commonStyles.centerVH]}>
                        <MyText>提现</MyText>
                    </View>
                </TouchableOpacity>
                <Line width={40} height={2} color={Colors.Primary} style={[commonStyles.absolute, {
                    bottom: 0,
                    left: SCREEN_WIDTH / 4 * (this.state.currentTab === 0 ? 1 : 3) - 20
                }]}/>
            </View>
        )
    };
    renderHeader = () => {
        return (
            <View style={[commonStyles.flexRow, {height: autoSize(46), paddingHorizontal: 10}]}>
                <View style={[commonStyles.centerVH, {display: 'flex', flex: 0.4, justifyContent: 'center'}]}>
                    <MyText>订单号</MyText>
                </View>
                <View style={[commonStyles.centerVH, {display: 'flex', flex: 0.2, justifyContent: 'center'}]}>
                    <MyText>收入</MyText>
                </View>
                <View style={[commonStyles.centerVH, {display: 'flex', flex: 0.4, justifyContent: 'center'}]}>
                    <MyText>时间</MyText>
                </View>
            </View>
        )
    };
    renderContent = ()=>{
        switch (this.state.currentTab){
            case 0:return (
                <FlatList data={this.props.balance.incomeList}
                          onRefresh={this.onRefresh}
                          refreshing={this.props.balance.loading}
                          ListHeaderComponent={this.renderHeader}
                          keyExtractor={(item:IncomeItem) => item.order_number}
                          ItemSeparatorComponent={() => <Line/>}
                          renderItem={(params:{item:IncomeItem,index:number}) => <IncomeListItem {...params.item} key={params.index}/>}/>
            );
            case 1:return <WithdrawPage />;
        }
        return null;
    };
    render() {
        if(!this.props.auth.isSignIn){
            return null;
        }
        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton/>}
                               title={{title: this.props.title, tintColor: '#fff'}}
                />
                {this.renderTabBar()}
                {this.renderContent()}
            </View>

        );
    }
}


export default connect(
    ({auth,balance})=>({auth,balance})
)(IncomePage);